<template>
	<view class="slider">
		<slider :min="rmin" :max="rmax" :value="rvalue" :step="rstep"  @change="Change" />
	</view>
</template>

<script>
	export default {
		mounted() {
			this.rmax = this.max
			this.rmin = this.min
			this.rvalue =this.value
			this.rstep = this.step
		},
		data() {
			return {
				rmax: 0,
				rmin: 0,
				rvalue: 0,
				rstep: 0
			}
		},
		props: {
			min: {
				type: Number,
				default: 0
			},
			max: {
				type: Number,
				default: 100
			},
			value: {
				type: Number,
				default: 0
			},
			step: {
				type: Number,
				default: 1
			}
		},
		watch:{
			value:function(n){
				this.rvalue=n
			},
			max:function(n){
				this.rmax=n
			}
		},
		methods: {
			Change(e) {
				this.$emit('change', e)
			}
		}
	}
</script>

<style lang="less" scoped>
	.slider {
		width: 100%;

		/deep/.uni-slider-handle-wrapper {
			height: 10px;
			border-radius: 999px;
			background-color: var(--background) !important;
			box-shadow:inset 10rpx 10rpx 15rpx var(--color1),
			inset	-10rpx -10rpx 15rpx var(--color2);
			transition: none;
		}
		/deep/.uni-slider-handle{
			// background-color: #35a9fc !important;
			background-color: var(--background) !important;
			box-shadow: 10rpx 10rpx 15rpx var(--color1),
				-10rpx -10rpx 15rpx var(--color2);
		}
		/deep/.uni-slider-track {
			height: 10px;
			border-radius: 999px;
			transition: none;
			// background-color: #35a9fc !important;
			
			background-color: var(--background) !important;
			box-shadow: 10rpx 10rpx 15rpx var(--color1),
				-10rpx -10rpx 15rpx var(--color2);
		}
	}
</style>
